<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- <link rel="stylesheet" href="./css/test.css"> -->
    <title></title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-image: linear-gradient(#97d8e0, #d8b0d9);
        font-family: '华文行楷';
        perspective: 500px;
      }

      * {
        margin: 0;
      }

      :root {
        --heart-color: red;
        --heart-size: 10px;
      }

      .heart {
        width: var(--heart-size);
        height: var(--heart-size);
        background-color: var(--heart-color);
        position: absolute;
        transform: rotate(45deg);
        box-shadow: 0 0 10px 1px rgba(255, 0, 0, 0.3);
        /* transition: .3s; */
        animation: jump 0.5s linear infinite alternate;
      }

      .heart::before,
      .heart::after {
        content: '';
        display: block;
        position: absolute;
        background-color: var(--heart-color);
        border-radius: 50%;
        width: var(--heart-size);
        height: var(--heart-size);
        box-shadow: 0 0 10px 1px rgba(255, 0, 0, 0.3);
      }

      .heart::before {
        left: -50%;
      }

      .heart::after {
        top: -50%;
      }

      @keyframes jump {
        form {
          transform: scale(1) rotate(45deg);
        }

        to {
          transform: scale(1.2) rotate(45deg);
        }
      }

      .envelope {
        width: var(--envelope-width);
        height: var(--envelope-height);
        background-color: #fff;
        transform: rotateX(30deg);
        transform-style: preserve-3d;
      }

      .tixing {
        width: calc(0.8 * var(--envelope-width));
        /* background-color: pink; */
        height: 0;
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto;
        border-width: calc(0.5 * var(--envelope-height)) calc(0.1 * var(--envelope-width)) 0 calc(0.1 * var(--envelope-width));
        border-style: solid solid none solid;
        border-color: var(--tixing-color) transparent transparent transparent;
        transition: 0.5s;
        transform-origin: top;
      }

      .front {
        position: absolute;
        height: 80%;
        background-color: var(--front-color);
        width: 100%;
        bottom: 0;
        box-shadow: 0 0 1px 1px var(--front-shadow-color);
      }

      /* .envelope:hover .tixing {
				transform: rotateX(180deg);
			} */

      .envelope .activeTixing {
        z-index: 0;
        transform: rotateX(180deg);
      }

      .letter {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 80%;
        height: 90%;
        background-color: pink;
        /* z-index: 2; */
        bottom: 0;
        font-size: 12px;
        text-align: center;
        padding-top: 10px;
        box-sizing: border-box;
        transition: 0.3s;
        user-select: none;
        z-index: 1;
      }

      .letter:hover {
        transform: translateY(-5px);
      }

      .envelope .activeLetter {
        transition: 2s;
        transform: translateY(-80px);
      }

      .envelope .rotateLetter {
        transform: translateY(0) translateZ(80px) rotateX(360deg) scale(2.5);
      }

      .tixing {
        z-index: 3;
      }

      .letter {
        z-index: 1;
      }

      .front {
        z-index: 2;
      }

      .heart {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 4;
      }

      :root {
        --envelope-color: #f5f0f0;
        --tixing-color: #f5fcfc;
        --front-color: #f5f4fe;
        --front-shadow-color: #f2f6fe;
        --envelope-width: 200px;
        --envelope-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="envelope">
      <div class="tixing"></div>
      <div class="front"></div>
      <div class="letter">
        想把你偷偷藏起来
        <br />
        你只能是我一个人的喜欢
        <br />
        又在为数不多时候想
        <br />
        把你展现给所有人
        <br />
        喏
        <br />
        这是我的
      </div>
      <div class="heart"></div>
    </div>
    <script>
      var heart = document.querySelector('.heart')
      var tixing = document.querySelector('.tixing')
      var envelope = document.querySelector('.envelope')
      var letter = document.querySelector('.letter')
      var count = 0
      tixing.onclick = function (e) {
        if (tixing.classList.contains('activeTixing') && !letter.classList.contains('activeLetter')) {
          tixing.classList.remove('activeTixing')
        } else {
          tixing.classList.add('activeTixing')
        }
        e.stopPropagation()
      }
      envelope.onclick = function () {
        if (count == 0) tixing.classList.toggle('activeTixing')
      }
      letter.onclick = function (e) {
        e.stopPropagation()
        count++
        // if (count == 1) {
        // 	letter.classList.toggle('activeLetter')
        // }
        // if (count >= 2) {
        // 	letter.classList.toggle('rotateLetter')
        // }
        if (count % 2 == 1) {
          letter.classList.add('activeLetter')
          setTimeout(function () {
            letter.classList.add('rotateLetter')
          }, 2000)
        } else {
          letter.classList.remove('rotateLetter')
          setTimeout(function () {
            letter.classList.remove('activeLetter')
          }, 2000)
        }
      }
    </script>
  </body>
</html>
